<template>
  <div id="farmHouseZL">
    <div class="grid">
      <div class="left">
        <div class="top">
          <img src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/NFTJ/12.png" width="20px" alt="">
          <span>建筑总面积</span>
        </div>
        <div class="bottom">
          <span>236504万平方米</span>
        </div>
      </div>
      <div class="right">
        <div class="top">
          <img src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/NFTJ/13.png" width="20px" alt="">
          <span>乡村总人数</span>
        </div>
        <div class="bottom">
          <span>1765万人</span>
        </div>
      </div>
    </div>
    <div style="padding-top: 10px;">
      <el-tabs v-model="activeName" type="card" @tab-click="handleinitecharts" style="font-weight:bold;height:300px">
        <el-tab-pane v-for="(items,index) in tab" :key="index" :label="items" :name="items">
          <template v-if="items == '房屋结构'">
            <div style="width: 355px;height: 320px;" class="homepage-content" id="radarChart1"></div>
          </template>
          <template v-if="items == '建设年代'">
            <div style="width: 355px;height: 320px;" class="homepage-content" id="radarChart2"></div>
          </template>
          <template v-if="items == '建造方式'">
            <div style="width: 355px;height: 320px;" class="homepage-content" id="radarChart3"></div>
          </template>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { fitChartSize } from '@/utils/echartUtils'
export default {
  data () {
    return {
      activeName: "房屋结构",
      tab: ['房屋结构', '建设年代', '建造方式'],
    }

  },
  methods: {
    handleinitecharts(val){
      let self = this;
      switch(self.activeName){
        case '房屋结构':
          self._initEchats()
          break
        case '建设年代':
          self._initEchats1()
          break
        case '建造方式':
          self._initEchats2()
          break
      }
    },
    _initEchats:async function (data) {
      let self = this;
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        color: ['#48cda6', '#fd87ab', '#11abff', '#ffdf33', '#968ade', 'yellow', 'blue', 'red'],
        legend: {
          type: 'plain',          // 普通图例
          orient: 'horizontal',   // 水平
          left: 40,               // 左距离
          top: 240,                // 上距离
          //   bottom: -30,             // 下距离
          width: 240,              // 宽度
          itemGap: 20,            // 间隔
          padding: [0, 30],
          itemWidth: 10,          // 图形宽度。
          itemHeight: 10,         // 图形高度。
          formatter: function (name) {
            // let data = this.series.data
            var arr = [
              '{a|' + '3211343' + ',占比' + '%}',
            ]
            return arr.join('\n');
          },
          textStyle: {
            rich: {
              a: {
                width: 90
              }
            }
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '30%'],
            center: ['50%', '34%'],
            selectedMode: 'single',
            data: [
              {
                value: 2811932,
                name: '砖石结构(预制板)',
                label: {
                  backgroundColor: '#eee',
                  borderColor: '#777',
                  borderWidth: 1,
                  borderRadius: 4,
                  rich: {
                    title: {
                      color: '#eee',
                      align: 'center'
                    }
                  }
                }
              },
              { value: 2811932, name: '混凝土结构' },
              { value: 14394, name: '钢结构' },
              { value: 1654173, name: '砖石结构(非预制板)' },
              { value: 3513506, name: '土木结构' },
              { value: 233045, name: '其他' },
              { value: 717975, name: '混杂结构' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 5,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      const element1 = self.$echarts.init(
        document.getElementById("radarChart1")
      );
      element1.clear();
      element1.setOption(option);
    },
    _initEchats1: async function (data) {
      let self = this;
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        color: ['#48cda6', '#fd87ab', '#11abff', '#ffdf33', '#968ade', 'yellow', 'blue', 'red'],
        legend: {
          type: 'plain',          // 普通图例
          orient: 'horizontal',   // 水平
          left: 40,               // 左距离
          top: 240,                // 上距离
          //   bottom: -30,             // 下距离
          width: 240,              // 宽度
          itemGap: 20,            // 间隔
          padding: [0, 30],
          itemWidth: 10,          // 图形宽度。
          itemHeight: 10,         // 图形高度。
          formatter: function (name) {
            // let data = this.series.data
            var arr = [
              '{a|' + '3211343' + ',占比' + '%}',
            ]
            return arr.join('\n');
          },
          textStyle: {
            rich: {
              a: {
                width: 90
              }
            }
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '30%'],
            center: ['50%', '34%'],
            selectedMode: 'single',
            data: [
              // {
              //   value: 2811932,
              //   name: '砖石结构(预制板)',
              //   label: {
              //     backgroundColor: '#eee',
              //     borderColor: '#777',
              //     borderWidth: 1,
              //     borderRadius: 4,
              //     rich: {
              //       title: {
              //         color: '#eee',
              //         align: 'center'
              //       }
              //     }
              //   }
              // },
              { value: 2811932, name: '1991年-2000年' },
              { value: 14394, name: '1980年之前' },
              { value: 1654173, name: '2001年-2010年' },
              { value: 3513506, name: '2011年后' },
              { value: 233045, name: '1981年-1990年' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 5,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      const element = self.$echarts.init(
        document.getElementById("radarChart2")
      );
      element.clear();
      element.setOption(option);
    },
    _initEchats2: async function (data) {
      let self = this;
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        color: ['#48cda6', '#fd87ab', '#11abff', '#ffdf33', '#968ade', 'yellow', 'blue', 'red'],
        legend: {
          type: 'plain',          // 普通图例
          orient: 'horizontal',   // 水平
          left: 40,               // 左距离
          top: 240,                // 上距离
          //   bottom: -30,             // 下距离
          width: 240,              // 宽度
          itemGap: 20,            // 间隔
          padding: [0, 30],
          itemWidth: 10,          // 图形宽度。
          itemHeight: 10,         // 图形高度。
          formatter: function (name) {
            // let data = this.series.data
            var arr = [
              '{a|' + '3211343' + ',占比' + '%}',
            ]
            return arr.join('\n');
          },
          textStyle: {
            rich: {
              a: {
                width: 90
              }
            }
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '30%'],
            center: ['50%', '34%'],
            selectedMode: 'single',
            data: [
              //   {
              //     value: 2811932,
              //     name: '砖石结构(预制板)',
              //     label: {
              //       backgroundColor: '#eee',
              //       borderColor: '#777',
              //       borderWidth: 1,
              //       borderRadius: 4,
              //       rich: {
              //         title: {
              //           color: '#eee',
              //           align: 'center'
              //         }
              //       }
              //     }
              //   },
              { value: 2811932, name: '建造工匠建设' },
              { value: 14394, name: '有资质的施工队伍建设' },
              { value: 233045, name: '其他' },
              { value: 717975, name: '自行建设' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 5,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      const element = self.$echarts.init(
        document.getElementById("radarChart3")
      );
      element.clear();
      element.setOption(option);
    },
  },
  mounted () {
    this._initEchats()
  }
}
</script>

<style lang="scss" scoped>
#farmHouseZL {
  height: 60vh;
  overflow: auto;
  background: #ffffff;
  font-size: 6px;
  padding: 10px 10px 10px 0;
  .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    height: 70px;
    .left {
      background: #e6f5ff;
      .top {
        text-align: center;
      }
      .bottom {
        text-align: center;
        color: #188bd9;
      }
    }
    .right {
      background: #e6f5ff;
      .top {
        text-align: center;
      }
      .bottom {
        text-align: center;
        color: #188bd9;
      }
    }
  }
}
</style>
<style lang="scss">
#farmHouseZL{
  .el-tabs--card > .el-tabs__header {
    border-bottom: none !important;
  }
  .el-tabs__item {
    width: 33.3% !important;
    color: #000 !important;
    text-align: center !important;
    border: 1px solid #d2d2d2 !important;
    font-size: 6px !important;
  }
  .el-tabs--card > .el-tabs__header .el-tabs__nav {
    width: 100% !important;
    border: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
    color: #67a2ff !important;
    border: 1px solid #d2d2d2 !important;
  }
  .el-tabs__item:nth-child(1) {
    border-radius: 100px 0px 0px 100px !important;
  }
  .el-tabs__item:nth-child(3) {
    border-radius: 0px 100px 100px 0px !important;
  }
  .el-tabs__item {
    line-height: 38px !important;
  }
}

</style>
